﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link type="text/css" rel="stylesheet" href="editor/jquery-te-Style.css" />

    <script type="text/javascript" src="editor/jquery-te-Core.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            $.ajax({
                url: "Service.asmx/CallService1",
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ skey: "module", model: "" }),
                success: function(data) {
                    data = JSON.parse(data.d);
                    var content = '';
                    content += '<option value=""></option>';
                    $(data).each(function() {
                        content += '<option value="{0}">{1}</option>';
                        content = myUtils.format(content, this.ID, this.Name);
                    });
                    $("[name='mid']").html(content);
                },
                error: function(x, e) {
                    $("[name='mid']").html(x.responseText);
                }
            });
            $("#myForm").submit(function() {
                $.ajax({
                    url: "Service.asmx/CallService2",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ skey: "item", model: JSON.stringify($("#myForm").serializeObject()) }),
                    beforeSend: function() {
                        return $("#myForm").valid();
                    },
                    success: function(data) {
                        data = JSON.parse(data.d);
                        if (data == 1) {
                            alert("Save successfully!");
                            $("[type='reset']").click();
                        }
                        else {
                            alert("Save failed!");
                        }
                    },
                    error: function(x, e) {
                        $("#myForm").html(x.responseText);
                    }
                });
                return false;
            });
            $("textarea").jqte();

            // validate myForm form on keyup and submit
            $("#myForm").validate({
                rules: {
                    mid: "required",
                    title: "required",
                    status: "required",
                    author: "required",
                    keyword: "required",
                    origin: "required",
                    createby: "required",
                    body: "required"
                },
                messages: {
                    mid: "Please enter your model name",
                    title: "Please enter your title",
                    status: "Please enter your status",
                    author: "Please enter your author",
                    keyword: "Please enter your keyword",
                    origin: "Please enter your origin",
                    createby: "Please enter your createby",
                    body: "Please enter your comment"
                }
            });
        });
    </script>

</head>
<body>
    <form id="myForm" class="cmxform">
    <fieldset>
        <p>
            <label for="mid">
                model name (required)</label>
            <select id="mid" name="mid" class="required">
            </select>
            <p>
                <label for="title">
                    title (required)</label>
                <input id="title" name="title" class="required" />
            </p>
            <p>
                <label for="status">
                    status (required)</label>
                <select id="status" name="status" class="required">
                    <option value=""></option>
                    <option value="1">Status1</option>
                    <option value="2">Status2</option>
                    <option value="3">Status3</option>
                    <option value="4">Status4</option>
                </select>
            </p>
            <p>
                <label for="author">
                    author (required)</label>
                <input id="author" name="author" class="required" />
            </p>
            <p>
                <label for="keyword">
                    keyword (required)</label>
                <input id="keyword" name="keyword" class="required" />
            </p>
            <p>
                <label for="origin">
                    origin (required)</label>
                <input id="origin" name="origin" class="required" />
            </p>
            <p>
                <label for="createby">
                    create by (required)</label>
                <input id="createby" name="createby" class="required" />
            </p>
            <p>
                <label for="body">
                    Your comment (required)</label>
                <textarea id="body" name="body" class="required"></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="submit" />
                <input class="cancel" type="reset" value="cancel" />
            </p>
    </fieldset>
    </form>
</body>
</html>
